<script setup lang="ts">
import { ref } from "vue";
import { onMounted, onUnmounted } from 'vue'

const scrollRef = ref();  //获取列表节点

function startScroll(){

//设置定时器,每50毫秒列表向下滑动1单位
  setInterval(() => {
//判断是否到底,如果到底,恢复到顶
    if (
        scrollRef.value.scrollTop >=
        scrollRef.value.scrollHeight - scrollRef.value.clientHeight
    ) {
      scrollRef.value.scrollTop = 0;
    } else {
      scrollRef.value.scrollTop += 1;
    }
  }, 50);}
onMounted(() => {
  startScroll();
})
</script>

<template>
  <div id="main">
    <p>ppppppppppp</p>
    <p>22222pppppppppppp<span class="redbox">redbox  span</span></p>
    <div class="bluebox">

    </div>
    <div class="flextest">
        <div class="fitem">1</div>
        <div class="fitem">2</div>
        <div class="fitem">3</div>
    </div>
    <div class="list" ref="scrollRef" style="height: 50px;overflow-y: auto">
      <div  v-for="item in 10" :key=item >{{item}}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  #main
  {
    p{
      color: #00ff00;
      width: 97%;
      .redbox {
        background-color: #ff0000;
        color: #000000;
      }

    }
    .bluebox{
      @include bfc;
      height: 100px;
      width: 100px;
      font-size: 40px;
    }
    .flextest{
      display: flex;
      flex-direction: row;
      .fitem{
        flex: 1;
        text-align: center;
        background-color: lime;
      }
    }
  }

</style>